import React from "react";

import { Input,InputNumber,Select,Form,Upload, Icon,message ,Button } from "antd";
import { ChromePicker } from "react-color";

class FieldSetRight extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }

  rgbaToHexColor(rgbaArray, alphaMaxVal = 1) {
    //补位警号
    return "#" + rgbaArray.map((chanel, index) => {
      let hexNum="";
      if (index === 3) {
        //这是alpha通道
        hexNum= Number(Math.round(chanel * 255/alphaMaxVal)).toString(16);
      }else {
        //普通通道直接转换
        hexNum=Number(chanel).toString(16)
      }
      return hexNum.length===1?'0'+hexNum:hexNum;//这里解决了部分通道数字小于10的情况进行补位
    }).join("");
  }

  beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('请上传 JPG/PNG ');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('文件大小请小于 2MB');
    }
    return isJpgOrPng && isLt2M;
  }

  handleChange = (file) => {
		if (file.file.status === "done") {
      this.props.updateFieldItem("src",file.file.response.url)
		}
	};

  renderFormItem = (type,type2) => {
    const { currentField,updateFieldItem } = this.props;
    switch(type){
      case 'text':
        return(
          <Form.Item label='标题'>
            <Input value={currentField.text} readOnly={currentField.fieldType == "form" || currentField.fieldType == "api"} onChange={(e) => updateFieldItem('text',e.target.value)} />
          </Form.Item>
        )
      case 'color':
        const label = type2 == 'color' ? '字体颜色' : type2 == 'backgroundColor' ? '背景颜色' : type2 == 'borderColor' ? '边框颜色' : ''
        return(
          <Form.Item label={label}>
            <ChromePicker
              color={currentField.styles[type2]}
              onChangeComplete={(color) => {
                this.setState({
                  winColor: updateFieldItem(type2,this.rgbaToHexColor([color.rgb.r,color.rgb.g,color.rgb.b,color.rgb.a])),
                });
              }}
            />
          </Form.Item>
        )
      case 'fontWeight':
        return(
          <Form.Item label='字体重量'>
            <Select value={currentField.styles.fontWeight} onChange={(value) => updateFieldItem('fontWeight',value)}>
              <Select.Option value={'normal'}>normal</Select.Option>
              <Select.Option value={'bold'}>bold</Select.Option>
              <Select.Option value={'bolder'}>bolder</Select.Option>
            </Select>
          </Form.Item>
        )
      case 'fontSize':
        return(
          <Form.Item label='字体大小，单位：px'>
            <Input value={currentField.styles.fontSize} onChange={(e) => updateFieldItem('fontSize',e.target.value)} />
          </Form.Item>
        )
      case 'lineHeight':
        return(
          <Form.Item label='行高，单位：px'>
            <Input value={currentField.styles.lineHeight} onChange={(e) => updateFieldItem('lineHeight',e.target.value)} />
          </Form.Item>
        )
      case 'size':
        //宽高
        return (
          <Form.Item label='大小，单位：px'>
            <Form.Item style={{display:"inline-block",marginRight:10,marginBottom:0}}>
              <label>宽：</label>
              <Input style={{width:60}} value={currentField.styles.width} onChange={(e) => updateFieldItem('width',e.target.value)} />
            </Form.Item>
            <Form.Item style={{display:"inline-block",marginRight:10,marginBottom:0}}>
              <label>高：</label>
              <Input style={{width:60}} value={currentField.styles.height} onChange={(e) => updateFieldItem('height',e.target.value)} />
            </Form.Item>
          </Form.Item>
        )
      case 'margin':
        //外边距
        return (
          <Form.Item>
            <Form.Item label='外边距，单位：px'>
              <Form.Item style={{display:"inline-block",marginRight:10,marginBottom:0}}>
                <label>上：</label>
                <Input style={{width:60}} value={currentField.styles.marginTop} onChange={(e) => updateFieldItem('marginTop',e.target.value)} />
              </Form.Item>
              <Form.Item style={{display:"inline-block",marginRight:10,marginBottom:0}}>
                <label>下：</label>
                <Input style={{width:60}} value={currentField.styles.marginBottom} onChange={(e) => updateFieldItem('marginBottom',e.target.value)} />
              </Form.Item>
            </Form.Item>
            <Form.Item>
              <Form.Item style={{display:"inline-block",marginRight:10,marginBottom:0}}>
                <label>左：</label>
                <Input style={{width:60}} value={currentField.styles.marginLeft} onChange={(e) => updateFieldItem('marginLeft',e.target.value)} />
              </Form.Item>
              <Form.Item style={{display:"inline-block",marginRight:10,marginBottom:0}}>
                <label>右：</label>
                <Input style={{width:60}} value={currentField.styles.marginRight} onChange={(e) => updateFieldItem('marginRight',e.target.value)} />
              </Form.Item>
            </Form.Item>
          </Form.Item>
        )
      case 'uploadImg':
        return(
          <Form.Item label='上传图片'>
            <Upload
              name='file'
              listType='picture-card'
              showUploadList={false}
              action='/cloud/file/upload'
              beforeUpload={this.beforeUpload}
              onChange={this.handleChange}
              accept='.png,.jpg'
            >
              {currentField.src ? <img src={currentField.src} alt="avatar" style={{ width: 80,height:80 }} /> : (
                <div>
                  <Icon type={'plus'} />
                  <div className="ant-upload-text">上传</div>
                </div>
              )}
            </Upload>
          </Form.Item>
        )
      case 'verticalAlign':
        return(
          <Form.Item label='垂直对齐方式'>
            <Select value={currentField.styles.verticalAlign} onChange={(value) => updateFieldItem('verticalAlign',value)}>
              <Select.Option value={'baseline'}>baseline</Select.Option>
              <Select.Option value={'bottom'}>bottom</Select.Option>
              <Select.Option value={'inherit'}>inherit</Select.Option>
              <Select.Option value={'initial'}>initial</Select.Option>
              <Select.Option value={'middle'}>middle</Select.Option>
              <Select.Option value={'revert'}>revert</Select.Option>
              <Select.Option value={'sub'}>sub</Select.Option>
              <Select.Option value={'super'}>super</Select.Option>
              <Select.Option value={'text-bottom'}>text-bottom</Select.Option>
              <Select.Option value={'text-top'}>text-top</Select.Option>
              <Select.Option value={'top'}>top</Select.Option>
              <Select.Option value={'unset'}>unset</Select.Option>
            </Select>
          </Form.Item>
        )
      case 'textAlign':
        return(
          <Form.Item label='文字对齐方式'>
            <Select value={currentField.styles.textAlign} onChange={(value) => updateFieldItem('textAlign',value)}>
              <Select.Option value={'left'}>left</Select.Option>
              <Select.Option value={'center'}>center</Select.Option>
              <Select.Option value={'right'}>right</Select.Option>
            </Select>
          </Form.Item>
        )
      case 'borderRadius':
        return(
          <Form.Item label='边框圆角，单位：px'>
            <Input value={currentField.styles.borderRadius} onChange={(e) => updateFieldItem('borderRadius',e.target.value)} />
          </Form.Item>
        )
    }
  }

  renderRightContent = () => {
    const { currentField,updateFieldItem } = this.props;
    switch(currentField.fieldType){
      case "cols":
        return (
          <div>
            <div>列配置项</div>
            {
              currentField.colList.map((item,index) => {
                return (
                  <div key={index}>
                    <InputNumber value={item.span} precision={0} min={1} max={24} onChange={(value) => updateFieldItem('colList',value,{type:"edit",index})} />
                    <Select 
                      value={item.textAlign} 
                      onChange={(value) => updateFieldItem('colList',value,{type:"editText",index})}
                      style={{marginLeft:5,width:100}}
                    >
                      <Select.Option value={'left'}>left</Select.Option>
                      <Select.Option value={'center'}>center</Select.Option>
                      <Select.Option value={'right'}>right</Select.Option>
                    </Select>
                    {
                      index != 0 ?(
                        <Icon type="delete" style={{color:"red",marginLeft:10,cursor:"pointer"}} onClick={(e) => updateFieldItem('colList',item.id,{type:"removeCol"})} />
                      ) : ''
                    }
                  </div>
                )
              })
            }
            <Button style={{marginTop:10}} type="primary" icon="plus" size="small" onClick={(e) => updateFieldItem('colList','',{type:"add"})}>添加列</Button>
            
          </div>
        );
      case "picture":
        return (
          <Form layout='vertical'>
            {this.renderFormItem("uploadImg")}
            {this.renderFormItem('size')}
            {this.renderFormItem("verticalAlign")}
            {this.renderFormItem("margin")}
          </Form>
        )
      case "tag":
        return(
          <Form layout='vertical'>
            {
              this.renderFormItem("text")
            }
            {
              this.renderFormItem("fontSize")
            }
            {
              this.renderFormItem("size")
            }
            {
              this.renderFormItem("textAlign")
            }
            {
              this.renderFormItem("lineHeight")
            }
            {
              this.renderFormItem("borderRadius")
            }
            {
              this.renderFormItem("color",'color')
            }
            {
              this.renderFormItem("color",'backgroundColor')
            }
            {
              this.renderFormItem("color",'borderColor')
            }
          </Form>
        )
      case "api":
      case "text":
      case "form":
        return (
          <Form layout='vertical'>
            {
              this.renderFormItem("text")
            }
            {
              this.renderFormItem("color",'color')
            }
            {
              this.renderFormItem("fontWeight")
            }
            {
              this.renderFormItem("fontSize")
            }
            {
              this.renderFormItem("margin")
            }
          </Form>
        )
    }
  }

  render(){
    const { currentField } = this.props;
    return(
      <div>
        {
          currentField ? (
            this.renderRightContent()
          ) : ''
        }
      </div>
    )
  }
}

export default FieldSetRight;
